/**
 * Created with JetBrains PhpStorm.
 * User: xuheng
 * Date: 12-5-22
 * Time: 上午11:38
 * To change this template use File | Settings | File Templates.
 */
var scrawl = function (options) {
	options && this.initOptions(options);
};
(function () {
	var canvas = $G("J_brushBoard"),
		context = canvas.getContext('2d'),
		drawStep = [], //undo redo存储
		drawStepIndex = 0; //undo redo指针

	scrawl.prototype = {
		isScrawl:false, //是否涂鸦
		brushWidth:-1, //画笔粗细
		brushColor:"", //画笔颜色

		initOptions:function (options) {
			var me = this;
			me.originalState(options);//初始页面状态
			me._buildToolbarColor(options.colorList);//动态生成颜色选择集合

			me._addBoardListener(options.saveNum);//添加画板处理
			me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
			me._addColorBarListener();//添加颜色选择处理
			me._addBrushBarListener();//添加画笔大小处理
			me._addEraserBarListener();//添加橡皮大小处理
			me._addAddImgListener();//添加增添背景图片处理
			me._addRemoveImgListenter();//删除背景图片处理
			me._addScalePicListenter();//添加缩放处理
			me._addClearSelectionListenter();//添加清楚选中状态处理

			me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
			me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
			me._clearSelection();//清楚选中状态
		},

		originalState:function (options) {
			var me = this;

			me.brushWidth = options.drawBrushSize;//同步画笔粗细
			me.brushColor = options.drawBrushColor;//同步画笔颜色

			context.lineWidth = me.brushWidth;//初始画笔大小
			context.strokeStyle = me.brushColor;//初始画笔颜色
			context.fillStyle = "transparent";//初始画布背景颜色
			context.lineCap = "round";//去除锯齿
			context.fill();
		},
		_buildToolbarColor:function (colorList) {
			var tmp = null, arr = [];
			arr.push("<table id='J_colorList'>");
			for (var i = 0, color; color = colorList[i++];) {
				if ((i - 1) % 5 == 0) {
					if (i != 1) {
						arr.push("</tr>");
					}
					arr.push("<tr>");
				}
				tmp = '#' + color;
				arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
			}
			arr.push("</tr></table>");
			$G("J_colorBar").innerHTML = arr.join("");
		},

		_addBoardListener:function (saveNum) {
			var me = this,
				margin = 0,
				startX = -1,
				startY = -1,
				isMouseDown = false,
				isMouseMove = false,
				isMouseUp = false,
				buttonPress = 0, button, flag = '';

			margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
			drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
			drawStepIndex += 1;

			domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
				button = browser.webkit ? e.which : buttonPress;
				switch (e.type) {
					case 'mousedown':
						buttonPress = 1;
						flag = 1;
						isMouseDown = true;
						isMouseUp = false;
						isMouseMove = false;
						me.isScrawl = true;
						startX = e.clientX - margin;//10为外边距总和
						startY = e.clientY - margin;
						context.beginPath();
						break;
					case 'mousemove' :
						if (!flag && button == 0) {
							return;
						}
						if (!flag && button) {
							startX = e.clientX - margin;//10为外边距总和
							startY = e.clientY - margin;
							context.beginPath();
							flag = 1;
						}
						if (isMouseUp || !isMouseDown) {
							return;
						}
						var endX = e.clientX - margin,
							endY = e.clientY - margin;

						context.moveTo(startX, startY);
						context.lineTo(endX, endY);
						context.stroke();
						startX = endX;
						startY = endY;
						isMouseMove = true;
						break;
					case 'mouseup':
						buttonPress = 0;
						if (!isMouseDown)return;
						if (!isMouseMove) {
							context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
							context.fillStyle = context.strokeStyle;
							context.fill();
						}
						context.closePath();
						me._saveOPerate(saveNum);
						isMouseDown = false;
						isMouseMove = false;
						isMouseUp = true;
						startX = -1;
						startY = -1;
						break;
					case 'mouseout':
						flag = '';
						buttonPress = 0;
						if (button == 1) return;
						context.closePath();
						break;
				}
			});
		},
		_addOPerateListener:function (saveNum) {
			var me = this;
			domUtils.on($G("J_previousStep"), "click", function () {
				if (drawStepIndex > 1) {
					drawStepIndex -= 1;
					context.clearRect(0, 0, context.canvas.width, context.canvas.height);
					context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
					me.btn2Highlight("J_nextStep");
					drawStepIndex == 1 && me.btn2disable("J_previousStep");
				}
			});
			domUtils.on($G("J_nextStep"), "click", function () {
				if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
					context.clearRect(0, 0, context.canvas.width, context.canvas.height);
					context.putImageData(drawStep[drawStepIndex], 0, 0);
					drawStepIndex += 1;
					me.btn2Highlight("J_previousStep");
					drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
				}
			});
			domUtils.on($G("J_clearBoard"), "click", function () {
				context.clearRect(0, 0, context.canvas.width, context.canvas.height);
				drawStep = [];
				me._saveOPerate(saveNum);
				drawStepIndex = 1;
				me.isScrawl = false;
				me.btn2disable("J_previousStep");
				me.btn2disable("J_nextStep");
				me.btn2disable("J_clearBoard");
			});
		},
		_addColorBarListener:function () {
			var me = this;
			domUtils.on($G("J_colorBar"), "click", function (e) {
				var target = me.getTarget(e),
					color = target.title;
				if (!!color) {
					me._addColorSelect(target);

					me.brushColor = color;
					context.globalCompositeOperation = "source-over";
					context.lineWidth = me.brushWidth;
					context.strokeStyle = color;
				}
			});
		},
		_addBrushBarListener:function () {
			var me = this;
			domUtils.on($G("J_brushBar"), "click", function (e) {
				var target = me.getTarget(e),
					size = browser.ie ? target.innerText : target.text;
				if (!!size) {
					me._addBESelect(target);

					context.globalCompositeOperation = "source-over";
					context.lineWidth = parseInt(size);
					context.strokeStyle = me.brushColor;
					me.brushWidth = context.lineWidth;
				}
			});
		},
		_addEraserBarListener:function () {
			var me = this;
			domUtils.on($G("J_eraserBar"), "click", function (e) {
				var target = me.getTarget(e),
					size = browser.ie ? target.innerText : target.text;
				if (!!size) {
					me._addBESelect(target);

					context.lineWidth = parseInt(size);
					context.globalCompositeOperation = "destination-out";
					context.strokeStyle = "#FFF";
				}
			});
		},
		_addAddImgListener:function () {
			var file = $G("J_imgTxt");
			if (!window.FileReader) {
				$G("J_addImg").style.display = 'none';
				$G("J_removeImg").style.display = 'none';
				$G("J_sacleBoard").style.display = 'none';
			}
			domUtils.on(file, "change", function (e) {
				var frm = file.parentNode;
				addMaskLayer(lang.backgroundUploading);

				var target = e.target || e.srcElement,
					reader = new FileReader();
				reader.onload = function(evt){
					var target = evt.target || evt.srcElement;
					ue_callback(target.result, 'SUCCESS');
				};
				reader.readAsDataURL(target.files[0]);
				frm.reset();
			});
		},
		_addRemoveImgListenter:function () {
			var me = this;
			domUtils.on($G("J_removeImg"), "click", function () {
				$G("J_picBoard").innerHTML = "";
				me.btn2disable("J_removeImg");
				me.btn2disable("J_sacleBoard");
			});
		},
		_addScalePicListenter:function () {
			domUtils.on($G("J_sacleBoard"), "click", function () {
				var picBoard = $G("J_picBoard"),
					scaleCon = $G("J_scaleCon"),
					img = picBoard.children[0];

				if (img) {
					if (!scaleCon) {
						picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText;
						img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
						var scale = new ScaleBoy();
						picBoard.appendChild(scale.init());
						scale.startScale(img);
					} else {
						if (scaleCon.style.visibility == "visible") {
							scaleCon.style.visibility = "hidden";
							picBoard.style.position = "";
							picBoard.style.zIndex = "";
						} else {
							scaleCon.style.visibility = "visible";
							picBoard.style.cssText += "position:relative;z-index:999";
						}
					}
				}
			});
		},
		_addClearSelectionListenter:function () {
			var doc = document;
			domUtils.on(doc, 'mousemove', function (e) {
				if (browser.ie && browser.version < 11)
					doc.selection.clear();
				else
					window.getSelection().removeAllRanges();
			});
		},
		_clearSelection:function () {
			var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
			for (var i = 0, group; group = list[i++];) {
				domUtils.unSelectable($G(group));
			}
		},

		_saveOPerate:function (saveNum) {
			var me = this;
			if (drawStep.length <= saveNum) {
				if(drawStepIndex<drawStep.length){
					me.btn2disable("J_nextStep");
					drawStep.splice(drawStepIndex);
				}
				drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
				drawStepIndex = drawStep.length;
			} else {
				drawStep.shift();
				drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
				drawStepIndex = drawStep.length;
			}
			me.btn2Highlight("J_previousStep");
			me.btn2Highlight("J_clearBoard");
		},

		_originalColorSelect:function (title) {
			var colorList = $G("J_colorList").getElementsByTagName("td");
			for (var j = 0, cell; cell = colorList[j++];) {
				if (cell.children[0].title.toLowerCase() == title) {
					cell.children[0].style.opacity = 1;
				}
			}
		},
		_originalBrushSelect:function (text) {
			var brushList = $G("J_brushBar").children;
			for (var i = 0, ele; ele = brushList[i++];) {
				if (ele.tagName.toLowerCase() == "a") {
					var size = browser.ie ? ele.innerText : ele.text;
					if (size.toLowerCase() == text) {
						ele.style.opacity = 1;
					}
				}
			}
		},
		_addColorSelect:function (target) {
			var me = this,
				colorList = $G("J_colorList").getElementsByTagName("td"),
				eraserList = $G("J_eraserBar").children,
				brushList = $G("J_brushBar").children;

			for (var i = 0, cell; cell = colorList[i++];) {
				cell.children[0].style.opacity = 0.3;
			}
			for (var k = 0, ele; ele = brushList[k++];) {
				if (ele.tagName.toLowerCase() == "a") {
					ele.style.opacity = 0.3;
					var size = browser.ie ? ele.innerText : ele.text;
					if (size.toLowerCase() == this.brushWidth) {
						ele.style.opacity = 1;
					}
				}
			}
			for (var j = 0, node; node = eraserList[j++];) {
				if (node.tagName.toLowerCase() == "a") {
					node.style.opacity = 0.3;
				}
			}

			target.style.opacity = 1;
			target.blur();
		},
		_addBESelect:function (target) {
			var brushList = $G("J_brushBar").children;
			var eraserList = $G("J_eraserBar").children;

			for (var i = 0, ele; ele = brushList[i++];) {
				if (ele.tagName.toLowerCase() == "a") {
					ele.style.opacity = 0.3;
				}
			}
			for (var j = 0, node; node = eraserList[j++];) {
				if (node.tagName.toLowerCase() == "a") {
					node.style.opacity = 0.3;
				}
			}

			target.style.opacity = 1;
			target.blur();
		},
		getCanvasData:function () {
			var picContainer = $G("J_picBoard"),
				img = picContainer.children[0];
			if (img) {
				var x, y;
				if (img.style.position == "absolute") {
					x = parseInt(img.style.left);
					y = parseInt(img.style.top);
				} else {
					x = (picContainer.offsetWidth - img.width) / 2;
					y = (picContainer.offsetHeight - img.height) / 2;
				}
				context.globalCompositeOperation = "destination-over";
				context.drawImage(img, x, y, img.width, img.height);
			} else {
				context.globalCompositeOperation = "destination-atop";
				context.fillStyle = "#fff";//重置画布背景白色
				context.fillRect(0, 0, canvas.width, canvas.height);
			}
			try {
				return canvas.toDataURL("image/png").substring(22);
			} catch (e) {
				return "";
			}
		},
		btn2Highlight:function (id) {
			var cur = $G(id);
			cur.className.indexOf("H") == -1 && (cur.className += "H");
		},
		btn2disable:function (id) {
			var cur = $G(id);
			cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
		},
		getTarget:function (evt) {
			return evt.target || evt.srcElement;
		}
	};
})();

var ScaleBoy = function () {
	this.dom = null;
	this.scalingElement = null;
};
(function () {
	function _appendStyle() {
		var doc = document,
			head = doc.getElementsByTagName('head')[0],
			style = doc.createElement('style'),
			cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
				+ '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
				+ '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
				+ '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
				+ '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
				+ '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
				+ '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
				+ '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
		style.type = 'text/css';

		try {
			style.appendChild(doc.createTextNode(cssText));
		} catch (e) {
			style.styleSheet.cssText = cssText;
		}
		head.appendChild(style);
	}

	function _getDom() {
		var doc = document,
			hand,
			arr = [],
			scale = doc.createElement('div');

		scale.id = 'J_scaleCon';
		scale.className = 'scale';
		for (var i = 0; i < 8; i++) {
			arr.push("<span class='hand" + i + "'></span>");
		}
		scale.innerHTML = arr.join("");
		return scale;
	}

	var rect = [
		//[left, top, width, height]
		[1, 1, -1, -1],
		[0, 1, 0, -1],
		[0, 1, 1, -1],
		[1, 0, -1, 0],
		[0, 0, 1, 0],
		[1, 0, -1, 1],
		[0, 0, 0, 1],
		[0, 0, 1, 1]
	];
	ScaleBoy.prototype = {
		init:function () {
			_appendStyle();
			var me = this,
				scale = me.dom = _getDom();

			me.scaleMousemove.fp = me;
			domUtils.on(scale, 'mousedown', function (e) {
				var target = e.target || e.srcElement;
				me.start = {x:e.clientX, y:e.clientY};
				if (target.className.indexOf('hand') != -1) {
					me.dir = target.className.replace('hand', '');
				}
				domUtils.on(document.body, 'mousemove', me.scaleMousemove);
				e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
			});
			domUtils.on(document.body, 'mouseup', function (e) {
				if (me.start) {
					domUtils.un(document.body, 'mousemove', me.scaleMousemove);
					if (me.moved) {
						me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}});
					}
					delete me.start;
					delete me.moved;
					delete me.dir;
				}
			});
			return scale;
		},
		startScale:function (objElement) {
			var me = this, Idom = me.dom;

			Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
			me.scalingElement = objElement;
		},
		updateScaledElement:function (objStyle) {
			var cur = this.scalingElement,
				pos = objStyle.position,
				size = objStyle.size;
			if (pos) {
				typeof pos.x != 'undefined' && (cur.style.left = pos.x);
				typeof pos.y != 'undefined' && (cur.style.top = pos.y);
			}
			if (size) {
				size.w && (cur.style.width = size.w);
				size.h && (cur.style.height = size.h);
			}
		},
		updateStyleByDir:function (dir, offset) {
			var me = this,
				dom = me.dom, tmp;

			rect['def'] = [1, 1, 0, 0];
			if (rect[dir][0] != 0) {
				tmp = parseInt(dom.style.left) + offset.x;
				dom.style.left = me._validScaledProp('left', tmp) + 'px';
			}
			if (rect[dir][1] != 0) {
				tmp = parseInt(dom.style.top) + offset.y;
				dom.style.top = me._validScaledProp('top', tmp) + 'px';
			}
			if (rect[dir][2] != 0) {
				tmp = dom.clientWidth + rect[dir][2] * offset.x;
				dom.style.width = me._validScaledProp('width', tmp) + 'px';
			}
			if (rect[dir][3] != 0) {
				tmp = dom.clientHeight + rect[dir][3] * offset.y;
				dom.style.height = me._validScaledProp('height', tmp) + 'px';
			}
			if (dir === 'def') {
				me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}});
			}
		},
		scaleMousemove:function (e) {
			var me = arguments.callee.fp,
				start = me.start,
				dir = me.dir || 'def',
				offset = {x:e.clientX - start.x, y:e.clientY - start.y};

			me.updateStyleByDir(dir, offset);
			arguments.callee.fp.start = {x:e.clientX, y:e.clientY};
			arguments.callee.fp.moved = 1;
		},
		_validScaledProp:function (prop, value) {
			var ele = this.dom,
				wrap = $G("J_picBoard");

			value = isNaN(value) ? 0 : value;
			switch (prop) {
				case 'left':
					return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
				case 'top':
					return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
				case 'width':
					return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
				case 'height':
					return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
			}
		}
	};
})();

//后台回调
function ue_callback(url, state) {
	var doc = document,
		picBorard = $G("J_picBoard"),
		img = doc.createElement("img");

	//图片缩放
	function scale(img, max, oWidth, oHeight) {
		var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
		if (ow > max || oh > max) {
			if (ow >= oh) {
				if (width = ow - max) {
					percent = (width / ow).toFixed(2);
					img.height = oh - oh * percent;
					img.width = max;
				}
			} else {
				if (height = oh - max) {
					percent = (height / oh).toFixed(2);
					img.width = ow - ow * percent;
					img.height = max;
				}
			}
		}
	}

	//移除遮罩层
	removeMaskLayer();
	//状态响应
	if (state == "SUCCESS") {
		picBorard.innerHTML = "";
		img.onload = function () {
			scale(this, 300);
			picBorard.appendChild(img);

			var obj = new scrawl();
			obj.btn2Highlight("J_removeImg");
			//trace 2457
			obj.btn2Highlight("J_sacleBoard");
		};
		img.src = url;
	} else {
		alert(state);
	}
}
//去掉遮罩层
function removeMaskLayer() {
	var maskLayer = $G("J_maskLayer");
	maskLayer.className = "maskLayerNull";
	maskLayer.innerHTML = "";
	dialog.buttons[0].setDisabled(false);
}
//添加遮罩层
function addMaskLayer(html) {
	var maskLayer = $G("J_maskLayer");
	dialog.buttons[0].setDisabled(true);
	maskLayer.className = "maskLayer";
	maskLayer.innerHTML = html;
}
//执行确认按钮方法
function exec(scrawlObj) {
	if (scrawlObj.isScrawl) {
		addMaskLayer(lang.scrawlUpLoading);
		var base64 = scrawlObj.getCanvasData();
		if (!!base64) {
			var options = {
				timeout:100000,
				onsuccess:function (xhr) {
					if (!scrawlObj.isCancelScrawl) {
						var responseObj;
						responseObj = eval("(" + xhr.responseText + ")");
						if (responseObj.state == "SUCCESS") {
							var imgObj = {},
								url = editor.options.scrawlUrlPrefix + responseObj.url;
							imgObj.src = url;
							imgObj._src = url;
							imgObj.alt = responseObj.original || '';
							imgObj.title = responseObj.title || '';
							editor.execCommand("insertImage", imgObj);
							dialog.close();
						} else {
							alert(responseObj.state);
						}

					}
				},
				onerror:function () {
					alert(lang.imageError);
					dialog.close();
				}
			};
			options[editor.getOpt('scrawlFieldName')] = base64;

			var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
				params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
				url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
			ajax.request(url, options);
		}
	} else {
		addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "'  onclick='removeMaskLayer()'/>");
	}
}

